<template>
  <div>
    <!-- <Header></Header> -->
    <div class="number">
      <div class="number-login">
        <div class="header">
          <div class="middle">
            <div class="nav-left">
              <img src="../../assets/images/logo.jpg" alt @click="$router.push('/')">
              <span>讨教号</span>
            </div>
            <div class="nav-right">
              <span>讨教网友</span>
              <span class="out" @click="$router.push('login')">退出</span>
            </div>
          </div>
        </div>
        <div class="container"></div>
      </div>
      <div class="number-container">
        <div class="step-wrap">
          <div class="step">
            <div>1</div>
            <p></p>
            <div>2</div>
            <p class="active"></p>
            <div class="active">3</div>
          </div>
          <div class="msg">
            <li>注册账号</li>
            <li>选择类型</li>
            <li class="active">填写资料</li>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header1",
  data() {
    return {};
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.number {
  height: 290px;
  background-color: #fff;
  // border-bottom: 3px solid #aed6ff;
  margin-top: -70px;
  .number-login {
    width: 100%;
    border-bottom: 3px solid #aed6ff;
    .header {
      width: 70%;
    margin: 0 auto;
      height: 74px;
      margin-top: 15px;
      .middle {
        // width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nav-left {
          margin-top: 17px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 100%;
          }
          span {
            font-size: 20px;
            padding-left: 20px;
          }
        }
        .nav-right {
          padding-top: 20px;
          font-size: 14px;
          color: #333;
          span {
            color: #000;
            font-size: 14px;
            padding-left: 4px;
            // line-height: 74px;
          }
          .out {
            color: #aed6ff;
            cursor: pointer;
          }
        }
      }
    }
  }
  .number-container {
    width: 100%;
    height: auto;
    border-top: 3px solid #fff;
    .step-wrap {
      width: 1000px;
      margin: 0 auto;
      margin-bottom: 62px;
      height: 150px;
      .step {
        width: 659px;
        height: 150px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
        // .active {
        //   background-color: #ddd;
        // }
        div {
          width: 37px;
          height: 37px;
          background: #aed6ff;
          color: #fff;
          border-radius: 100%;
          text-align: center;
          line-height: 37px;
        }
        p {
          background-color: #aed6ff;
          height: 5px;
          width: 275px;
          margin-top: 15px;
        }
      }
      .msg {
        width: 700px;
        margin: 0 auto;
        display: flex;
        margin-top: -100px;
        justify-content: space-between;
        // .active {
        //   color: #666;
        // }
        li {
          list-style: none;
          font-size: 16px;
          color: #aed6ff;
        }
      }
    }
  }
}
</style>


